<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/view/common/taglibs.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>${appname}-<c:if test="${!empty sessionScope._local_node_session}">${sessionScope._local_node_session.nodeName}-</c:if>${si:ctname("NET_TYPE",sessionScope._netType)}</title>
<%@ include file="/WEB-INF/view/common/css_js_ace.jsp"%>
<link rel="stylesheet"
	href="${ctx}/static/FusionCharts/Contents/Style.css" type="text/css" />
<script type="text/javaScript"
	src="${ctx}/static/FusionCharts/JSClass/FusionCharts.js"></script>
<script type="text/javaScript" src="${ctx}/static/js/popover.js"></script>
<script type="text/javaScript" src="${ctx}/static/js/tooltip.js"></script>
<script src="${ctx}/static/ace/js/jquery.easy-pie-chart.min.js"></script>

<link rel="stylesheet" type="text/css"
	href="${ctx}/flex/history/history.css" />
<script type="text/javascript" src="${ctx}/flex/history/history.js"></script>
<!-- END Browser History required section -->

<script type="text/javascript" src="${ctx}/flex/swfobject.js"></script>

<script type="text/javascript">
	jQuery(function($) {
		$('.easy-pie-chart.percentage').each(function() {
			var $box = $(this).closest('.infobox');
			var barColor = $(this).data('color') || (!$box.hasClass('infobox-dark') ? $box.css('color') : 'rgba(255,255,255,0.95)');
			var trackColor = barColor == 'rgba(255,255,255,0.95)' ? 'rgba(255,255,255,0.25)' : '#E2E2E2';
			var size = parseInt($(this).data('size')) || 50; 
			$(this).easyPieChart({
						barColor : barColor,
						trackColor : trackColor,
						scaleColor : false,
						lineCap : 'butt',
						lineWidth : parseInt(size / 10),
						animate : /msie\s*(8|7|6)/ .test(navigator.userAgent .toLowerCase()) ? false : 1000,
						size : size
			});
		})
		var spinner = $('#spinner1').ace_spinner({
			value : 0,
			min : 0,
			max : 200,
			step : 1,
			btn_up_class : 'btn-info',
			btn_down_class : 'btn-info'
		}).on('change', function() {
			//alert(this.value)
		});
		$('#spinner1').removeClass('form-control');

		$('[data-rel=tooltip]').tooltip();
		$('[data-rel=popover]').popover({
			html : true
		});
		$('#searchdiv').on('shown.bs.popover', function() {
			var searchType = $("#searchType").val();
			if (searchType == "") {
				searchType = "node";
				changeNode();
			}
			$("#type_" + searchType).attr("checked", "true");
			var ownerId = $("#ownerId").val();
			var infoText = $("#info_text").val();
			change();
			$("#" + searchType).val(ownerId);
			$("#ownerId").val($("#" + searchType).val());
			$("#info_text").val(infoText);
		});
		$("#right").height($("#left").height() - 61);
		$("#net").height($("#pipline").height());
	});

	function chart(type, level) {
		var ownerId = $("#ownerId").val() || "";
		$.ajax({
			type : "POST",
			dataType : "json",
			cache : false,
			url : _ctx + "/monitor/statistics_monitor.do?date=" + new Date().getTime(),
			data : {
				"type" : type,
				"level" : level,
				"ownerId" : ownerId
			},
			success : function(content) {
				if (content.status == '1') {
					var chart = new FusionCharts(
							"${ctx}/static/FusionCharts/Charts/MSLine.swf",
							"ChartId", $("#" + type + "Chartdiv").width() - 15,
							"250", "0", "0");
					chart.setDataXML(content.data);
					chart.render(type + "Chartdiv");
				} else {
					ui.msg(content.msg, 0);
				}
			},
			error : function() {
				//ui.msg('信息加载错误', 0);
			}
		});
	}

	function getMonitorShow(codes, flag) {
		var ownerId = "";
		//flag 0 无对象id（全局指标），1 所选对象id　2本地节点id
		if (flag == '1') {
			ownerId = $("#ownerId").val();
		}else if(flag == '2'){
			ownerId = '${node.id}';
		}
		if(codes == "" || codes== null ){
			return false;
		}
		$.ajax({
			type : "POST",
			dataType : "json",
			cache : false,
			url : _ctx + "/monitor/get_monitor_show.do?date="
					+ new Date().getTime(),
			data : {
				"codes" : codes,
				"ownerId" : ownerId
			},
			success : function(resp) {
				if (resp.status == '1') {
					var codesVal = codes.split(',');
					for ( var j = 0; j < codesVal.length; j++) {
						var dafultValue;
						if (codesVal[j].indexOf('_for_') > 0) {
							dafultValue = $("#"+ codesVal[j].substring(0,codesVal[j].indexOf('_for_'))).attr('dafultValue');
							$("#"+ codesVal[j].substring(0,codesVal[j].indexOf('_for_'))).html(dafultValue);
						} else {
							dafultValue = $("#" + codesVal[j]).attr('dafultValue');
							$("#" + codesVal[j]).html(dafultValue);
						}
					}
					var shows = "";
					shows = eval('(' + resp.msg + ')');
					for ( var i = 0; i < shows.length; i++) {
						var json = shows[i];
						var code = json.code;
						var labelId;
						if (code.indexOf("_for_") > 0) {
							labelId = code.substring(0, code.indexOf("_for_"));
						} else {
							labelId = code;
						}
						var alertVal = $("#" + labelId).attr('alert');
						var html;
						var value = json.value;
						
						if(labelId == "tonglingkq_conn_status" || labelId == "ftp_conn_status" ||  labelId == "gap_status"  || labelId =="tonglingkq_queue_status"){
							if(value== "1"){
								html = "<i class='icon-circle green'></i>";
							}else{
								html = "<i class='icon-circle red'></i>";
							}
						}else if(labelId.indexOf("_rate") != -1){
							if(labelId == "ftp_fs_used_rate"){
								$("#"+ labelId).css({"width":value+"%"});
								$("#"+ labelId+"_pie").attr("data-percent",value+"%");
								if (json.alert == '1') {
									$("#"+ labelId).css({"background":"#FF0000"});
								} 
								html = " ";
							}else{
								$("#"+ labelId+"_pie").attr("data-percent",value+"");
								html =value+"%";
							}
						}else {
							if (alertVal == '1' || json.alert == '1') {
								html = "<div class='red'>" + value + "</i>&nbsp;&nbsp;"
							} else {
								html = "<div class='blue'>" + value + "</i>&nbsp;&nbsp;"
							}
						}
						$("#" + labelId).html(html);
					}
				} else {
					ui.msg(resp.msg, 0);
				}
			},
			error : function() {
				//ui.msg('信息加载错误', 0);
			}
		});
	}
	function change() {
		$("#domain").css("display", "none");
		$("#adapter").css("display", "none");
		var searchType = $("#searchType").val()
		if (searchType != "node") {
			$("#ownerId").val("");
		}
		$("#domain").val("");
		$("#adapter").val("");
		$("#" + $("input[name='type']:checked").val()).css("display", "");
	}
	function changeNode() {
		$("#ownerId").val('${node.id }');
		$("#info_text").val("(按节点)");
	}
	function changeDomain() {
		$("#ownerId").val($("#domain").val());
		$("#info_text").val(
				"(域：" + $("#domain").find("option:selected").text() + ")");
	}
	function changeAdapter() {
		$("#adapterCode").val(
				$("select[name=adapter]").find('option:selected').attr("adapterCode"));
		$("#ownerId").val($("#adapter").val());
		$("#info_text").val(
				"(适配器：" + $("#adapter").find("option:selected").text() + ")");
	}
	function ok() {
		var type = $("input[name='type']:checked").val();
		if (type == "node") {
			$("#ownerId").val('${node.id }');
			$("#info_text").val("(按节点)");
		}
		if ($("#ownerId").val() == "") {
			alert("请选择监控级别");
		} else {
			$("#searchdiv").popover('toggle');
			$("#search_text").html($("#info_text").val());
			$("#searchType").val(type);
			submit();
		}
	}
	function submit() {
		var level;
		var searchType;
		var type;
		if ($("#type").val() == "") {
			type = "send";
		} else {
			type = $("#type").val();
		}
		if ($("#searchType").val() == "") {
			searchType = "_for_node";
			$("#ownerId").val('${node.id }');
			level = "node";
		} else {
			searchType = "_for_" + $("#searchType").val();
			level = $("#searchType").val();
		}
		//数据发送量实时监控 
		chart("send", level);
		//chart("recv", level);

		//节点信息
		//getMonitorShow("regist_adapter_num,exch_rel_node_num", '0');
		//--结构化数据交换监控
		//结构化数据交换通道监控 
		//getMonitorShow("local_tonglingkq_conn_status,local_tonglingkq_queue_num,local_tonglingkq_queue_error_num,remote_tonglingkq_conn_status,remote_tonglingkq_queue_error_num",'0');
		//结构化数据--本节点数据发送情况 
		getMonitorShow("structured_send_wait_num" + searchType
				+ ",structured_send_sending_num" + searchType
				+ ",structured_send_success_num" + searchType
				+ ",structured_send_fail_num" + searchType
				+ ",structured_send_success_rate" +searchType, '1');
		//结构化数据--本节点数据接收情况
		getMonitorShow("structured_recv_success_num" + searchType
				+ ",structured_recv_fail_num" + searchType
				+ ",structured_recv_success_rate" + searchType, '1');

		
		//--非结构化数据交换监控 
		//本节点数据发送情况
		getMonitorShow("unstructured_send_wait_num" + searchType
				+ ",unstructured_send_sending_num" + searchType
				+ ",unstructured_send_success_num" + searchType
				+ ",unstructured_send_fail_num" + searchType
				+ ",unstructured_send_success_rate" + searchType, '1');
		//本节点数据接收情况
		getMonitorShow("unstructured_recv_success_num" + searchType
				+ ",unstructured_recv_fail_num" + searchType
				+ ",unstructured_recv_success_rate" + searchType, '1');
		//非结构化数据交换通道监控
		//内外网交换监控
		getMonitorShow("gap_to_send_num,gap_to_send_size,carved_discs_sum,carved_diss_size,gap_status", '2');
		//通道监控
		getMonitorShow("tonglingkq_queue_status,ftp_fs_used_rate", '2');
		getMonitorShow("tonglingkq_conn_status,ftp_conn_status,gap_status", '2');
		
	}
	function closeSearchdiv() {
		$("#searchdiv").popover('toggle');
	}
	function statistics(type) {
		if (type == 'recv') {
			$('#send').removeClass("active");
			$('#recv').addClass("active");
		} else {
			$('#send').addClass("active");
			$('#recv').removeClass("active");
		}
		$("#type").val(type);

		var level;
		if ($("#searchType").val() == "") {
			searchType = "_for_node";
			$("#ownerId").val('${node.id }');
			level = "node";
		} else {
			searchType = "_for_" + $("#searchType").val();
			level = $("#searchType").val();
		}
		chart("send", level);
		chart("recv", level);
	}
	function goToQuotaPage(url, adapterCodeParaName) {
		var type = $("#searchType").val();
		if (type == 'adapter') {
			url += "&" + adapterCodeParaName + "=" + $("#adapterCode").val();
		}
		self.location = url;
	}
</script>
</head>
<body onload="submit();">
	<%@ include file="/WEB-INF/view/common/topbar.jsp"%>
	<div class="main-container" id="main-container" style="text-align: left;">
		<div class="main-container-inner">
			<%@ include file="/WEB-INF/view/common/sidebar.jsp"%>
			<div class="main-content">
				<div class="page-content">
					<div class="row">
						<div class="col-xs-12">
							<c:if test="${sessionScope._user_session.slAuthFlag ne 4 }">
							<div class="row">
								<div class="widget-box" style="border: 0px;">
									<h4 class="header blue lighter smaller" style="margin-bottom: 0px;margin-top: 0px;">
										<i class="icon-calendar-empty orange smaller-10"></i> 交换节点交换监控
										<a href="#" data-action="collapse"> 
											<i class="icon-chevron-up"></i> 
										</a>
									</h4>
									<div class="widget-body" style="border: 0px;">
										<div id="reldiv" align="center" class="tab-content" style="border: 0px;">
											<%@ include file="/flex/exch_monitor.jsp"%>
										</div>
									</div>
								</div>
							</div>
							</c:if>
							<div class="row">
								<div class="widget-box" style="border: 0px;">
									<h4 class="header blue lighter smaller" style="margin-bottom: 0px;margin-top: 0px;">
										<i class="icon-calendar-empty orange smaller-10"></i> 本节点交换监控 
											<c:if test="${sessionScope._user_session.slAuthFlag ne 4 }">
												<a href="#" data-action="collapse"> 
													<i class="icon-chevron-up"></i> 
												</a> &nbsp;&nbsp;&nbsp;&nbsp; 
											</c:if>
											<span class="btn btn-primary btn-xs dropdown-toggle" data-rel="popover" style="<c:if test='${nodeAdmin eq 0 }'>display: none;</c:if>" data-placement="bottom"
											title='
												&nbsp;&nbsp;
												<input  type="radio" class="ace"  name="type" id="type_node" value="node" onchange="change();" />
												<span class="lbl" style="font-size: 11px;"> 节点</span>&nbsp;&nbsp;
												<input  type="radio" class="ace"  name="type" id="type_domain" value="domain" onchange="change();"/>
												<span class="lbl" style="font-size: 11px;"> 域</span>&nbsp;&nbsp;
												<input  type="radio" class="ace"  name="type" id="type_adapter" value="adapter" onchange="change();"/>
												<span class="lbl" style="font-size: 11px;">适配器</span>
												&nbsp;&nbsp;
											'
											data-content='
												<select class="input-medium" id="domain" name="domain" onchange="changeDomain();"  style="display: none;width: 165px;font-size:small;">
													<option value="">-请选择-</option>
													<c:forEach var="domain" items="${ domainList}">
													<option value="${domain.id }">${domain.name }</option>
													</c:forEach>
												</select>
												<select class="input-medium" id="adapter" name="adapter" onchange="changeAdapter();" style="display: none;width: 165px;font-size:small;">
													<option value="">-请选择-</option>
													<c:forEach var="adapter" items="${ adapterList}">
														<option value="${adapter.id }"  adapterCode="${adapter.adapterCode}">${adapter.adapterName }</option>
													</c:forEach>
												</select>
												<div class="space-4"></div>
												<button class="btn btn-danger btn-minier" onclick="closeSearchdiv();">
													<i class="icon-remove bigger-120"></i> 
												</button>
												<button type="button" class="btn btn-primary btn-minier "  style="margin-left: 107px;" id="submit" onclick="ok();">
													<i class="icon-ok bigger-110"></i>
												</button>
											'
											id="searchdiv">监控级别选择
											<span class="icon-caret-down icon-on-right"></span> 
											</span> &nbsp;&nbsp; 
											<span class="lbl" id="search_text" style="font-size:small;<c:if test='${nodeAdmin eq 0 }'>display: none;</c:if>">(按节点)</span>
											<input type="hidden" id="info_text" name="info_text" /> 
											<input type="hidden" id="ownerId" name="ownerId" value="${ownId}">
											<input type="hidden" id="adapterCode" name="adapterCode"> 
											<input type="hidden" id="searchType" name="searchType" value="${searchType }">
									</h4>
									<div class="widget-body" style="border: 0px;">
										<div class="row">
											<div class="col-sm-12">
												<h6 class="header smaller lighter blue">
													<i class="icon-bar-chart "></i>&nbsp;&nbsp;当日数据发送/接收量监控
												</h6>
											</div>
											<div class="col-xs-12">
												<input type="hidden" id="type" name="type" value="${param.type }">
												<div class="col-sm-12">
													<div class="tabbable">
															<div class="col-xs-12">
																<div id="sendChartdiv" align="center" class="tab-content">
																</div>
															</div>
													</div>
												</div>
											</div>
										</div>
										<div class="row">
											<div class="col-sm-12">
												<h6 class="header smaller lighter blue">
													<i class="icon-th-large"></i>&nbsp;&nbsp;数据交换监控
												</h6>
											</div>
										</div>
										<div class="row">
											<div class="col-xs-6">
												<div class="row">
													<div class="col-xs-12">
														<div class="panel panel-primary">
															<div class="panel-heading" style="background-color:#6fb3e0; border-color:#6fb3e0;">
																<i class="icon-exchange "></i>&nbsp;&nbsp;数据交换&nbsp;&nbsp;&nbsp;&nbsp;
															</div>
															<div class="row">
																<div class="col-xs-12">
																	<div class="profile-user-info ">
																		<div class="profile-info-row">
																			<div class="profile-info-name" style="width: 80px;padding: 10px 10px 6px 0;">发送》</div>
																			<div class="profile-info-value" style="margin-left: 80px;">
																				<span class="editable"> 成功&nbsp;&nbsp;/&nbsp;&nbsp;待发送&nbsp;&nbsp;/&nbsp;&nbsp;发送中&nbsp;&nbsp;/&nbsp;&nbsp;发送失败&nbsp;&nbsp;： 
																					<label dafultValue="0" id="unstructured_send_success_num">0</label>&nbsp;&nbsp;/&nbsp;&nbsp;
																					<label dafultValue="0" id="unstructured_send_wait_num">0</label>&nbsp;&nbsp;/&nbsp;&nbsp;
																					<label dafultValue="0" id="unstructured_send_sending_num">0</label>&nbsp;&nbsp;/&nbsp;&nbsp;
																					<a href="javascript:void(0)" onclick="goToQuotaPage('${ctx}/monitor/send_file_data_list.do?sendNodecode=${node.nodeCode}&sendStatus=3','sendAdaptercode')">
																						<label alert="1" dafultValue="0" id="unstructured_send_fail_num" style=" text-decoration: underline;cursor:pointer;">0</label>
																					</a> 
																				</span>
																			</div>
																		</div>
																		<div class="profile-info-row">
																			<div class="profile-info-name" style="width: 80px;padding: 10px 10px 6px 0;">接收》</div>
																			<div class="profile-info-value" style="margin-left: 80px;">
																				<span class="editable">成功&nbsp;&nbsp;/&nbsp;&nbsp;接收失败：
																					<label dafultValue="0" id="unstructured_recv_success_num">0</label>&nbsp;&nbsp;/&nbsp;&nbsp;
																					<a href="javascript:void(0)" onclick="goToQuotaPage('${ctx}/monitor/recv_file_data_list.do?recvNodecode=${node.nodeCode}&sendStatus=3','sendAdaptercode')">
																						<label alert="1" dafultValue="0" id="unstructured_recv_fail_num" style=" text-decoration: underline;cursor:pointer;">0</label>
																					</a> 
																				</span>
																			</div>
																		</div>
																		<div class="profile-info-row" style="padding:10px 130px;">
																			<div class="infobox infobox-green infobox-small infobox-dark" style="width: 130px;height: 44px;background-color: #00CC99;">
																				<div class="infobox-progress ">
																					<div class="easy-pie-chart percentage" data-percent="0" data-size="33" id="unstructured_send_success_rate_pie">
																						<span class="percent "><label dafultValue="0%" id="unstructured_send_success_rate">0</label></span>
																					</div>
																				</div>
																				<div class="infobox-data">
																					<div class="infobox-content"
																						style="font-weight: normal;">发送</div>
																					<div class="infobox-content">成功率</div>
																				</div>
																			</div>
																			<div class="infobox infobox-blue2 infobox-small infobox-dark" style="width: 130px;height: 44px;background-color: #9966FF;">
																				<div class="infobox-progress ">
																					<div class="easy-pie-chart percentage" data-percent="0" data-size="33" id="unstructured_recv_success_rate_pie">
																						<span class="percent "><label dafultValue="0%" id="unstructured_recv_success_rate">0</label></span>
																					</div>
																				</div>
																				<div class="infobox-data">
																					<div class="infobox-content"
																						style="font-weight: normal;;">接收</div>
																					<div class="infobox-content">成功率</div>
																				</div>
																			</div>
																		</div>
																	</div>
																</div>
															</div>
														</div>
													</div>
												</div>
											</div>
											<div class="col-xs-6">
														<div class="panel panel-primary">
															<div class="panel-heading" style="background-color:#6fb3e0; border-color:#6fb3e0;">
																<i class="icon-exchange"></i>&nbsp;&nbsp;通道监控&nbsp;&nbsp;&nbsp;&nbsp;
															</div>
															<div class="row">
																<div class="col-xs-12">
																	<div class="profile-user-info " id="pipline">
																		<div class="profile-info-row">
																			<div class="row">
																				<c:if test="${tlqEnable eq 1 }">
																				<div class="col-xs-6">
																					<div class="profile-info-name" style="padding: 10px 0px 6px 0;width: 130px;">TonglinkQ连接状态</div>
																					<div class="profile-info-value" style="padding-top: 10px;" id="tonglingkq_conn_status">
																						N/A
																					</div>
																				</div>
																				<div class="col-xs-6">
																					<div class="profile-info-name" style="padding: 10px 0px 6px 0;width: 130px;">TonglinkQ队列状态</div>
																					<a href="${ctx}/registry/tlq_qcu.do">
																						<div class="profile-info-value" style="padding-top: 10px;" id="tonglingkq_queue_status">
																							N/A
																						</div>
																					</a>
																				</div>
																				</c:if>
																			</div>
																		</div>
																		<c:if test="${sessionScope._user_session.userType ne 0}">
																				<div class="profile-info-row">
																					<div class="row">
																						<c:if test="${hasGap eq 1 }">
																						<div class="col-xs-6">
																							<div class="profile-info-name" style="padding: 10px 0px 6px 0;width: 130px;">网闸连接状态</div>
																							<div class="profile-info-value" style="padding-top: 10px;" id="gap_status">
																								N/A
																							</div>
																						</div>
																						<div class="col-xs-6">
																							<div class="profile-info-name" style="padding: 10px 0px 6px 0;width: 150px;">网闸待交换文件个数/总量</div>
																							<div class="profile-info-value" style="padding-top: 8px;padding-left: 25px;">
																								<span class="editable">
																									<label dafultValue="0" id="gap_to_send_num">0</label>&nbsp;/&nbsp;
																									<label dafultValue="0" id="gap_to_send_size">0</label>
																								</span>
																							</div>
																						</div>
																						</c:if>
																						
																					</div>
																				</div>
																		</c:if>
																		<div class="profile-info-row" style="height: 67px;">
																			<div class="row" >
																				<div class="col-xs-12">
																							<div class="profile-info-name" style="padding: 10px 0px 6px 0;width: 200px;">&nbsp;待交换任务次数(刻盘)/文件总量</div>
																							<div class="profile-info-value" style="padding-top: 8px;padding-left: 70px;">
																								<span class="editable">
																									<label dafultValue="0" id="carved_discs_sum">0</label>&nbsp;/&nbsp;
																									<label dafultValue="0" id="carved_diss_size">0</label>
																								</span>
																							</div>
																						</div>
																			</div>
																		</div>
																	</div>
																</div>
															</div>
														</div>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>
